<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>预览--优客工厂</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body class="childrenBody">
<div id="content"></div>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="video.min.js"></script>
<script>

    // var type = ["视频", "图片", "视频"];
    // var src = ["http://test45.bj.bcebos.com/2018051815f78c6b1a.mov", "http://urwork.bj.bcebos.com\\20181211142d1ca6b8.jpg", "http://test45.bj.bcebos.com/2018032920baa7b9ba.mp4"];
    // var musicTime = [0, 2000, 0];
    // var musicPath = ["", "http://urwork.bj.bcebos.com\\2018120509148085dd.mp3", ""];
    var type = [], src = [], musicTime = [], musicPath = [];
    var ads = [];
    var plays = [];
    var materialNumber = 0,currentIndex=0;
    $.ajax({
        url: "http://localhost:8082/Ad/selectList?token=" + sessionStorage.getItem("token"),
        type: "get",
        success: function (result) {
            if (result.code == 0) {
                $.each(result.data, function (index, element) {
                    ads.push(element);
                });
                init();
            } else {
                alert("error，" + result.exception);
            }
        }
    });

    function init() {
        for (i = 0; i < ads.length - 1; i++) {
            for (j = 0; j < ads.length - 1 - i; j++) {
                if (ads[j].priority > ads[j + 1].priority) {
                    var temp = ads[j];
                    ads[j] = ads[j + 1];
                    ads[j + 1] = temp;
                }
            }
        }

        $.each(ads,function (index,item) {
            var arr = item.adMaterialVos;
            for (i = 0; i < arr.length - 1; i++) {
                for (j = 0; j < arr.length - 1 - i; j++) {
                    if (arr[j].orderIndex > arr[j + 1].orderIndex) {
                        var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
        });

        $.each(ads,function (index,item) {
            var arr = item.adMaterialVos;
            for (i = 0; i < arr.length ; i++) {
               plays.push(arr[i]);
            }
        });

        console.log(ads);
        console.log(plays);

        playMaterial();
    }
    
    function playMaterial() {
        var material=plays[currentIndex];
        switch (material.materialType){
            case "图片":{
                $("#content").html("<img src='"+material.materialPath+"' width='800px' height='450px'></img><audio src='"+material.musicPath+"'autoplay></audio>");
                setTimeout(function () {
                    playMaterial();
                },parseInt(material.displayTime)*1000);
                break;
            }
            case "视频":{
                $("#content").html("<video src='"+ material.materialPath+"' controls autoplay width='800px' height='450px'></video>");
                $("video").on("timeupdate", function (event) {
                    onTrackedVideoFrame(this.currentTime, this.duration);
                });

                function onTrackedVideoFrame(currentTime, duration) {
                    // 当播放时间与视频总时相同时
                    if (currentTime == duration) {
                        playMaterial();
                    }
                }
                break;
            }
            case "直播":{
                $("#content").html('<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="800px" height="450px"><source src="' + material.materialPath + '" type="application/x-mpegURL"></video>');
                videojs('myVideo', {
                    bigPlayButton: false,
                    textTrackDisplay: false,
                    posterImage: false,
                    errorDisplay: false,
                    autoplay: true,
                    preload: "auto",
                });
                $("video").on("timeupdate", function (event) {
                    onTrackedVideoFrame(this.currentTime, this.duration);
                });

                function onTrackedVideoFrame(currentTime, duration) {
                    // 当播放时间与视频总时相同时
                    if (currentTime == duration) {
                        playMaterial();
                    }
                }
                break;
            }
        }
        currentIndex>=plays.length-1? currentIndex=0:currentIndex++;
    }



</script>
</body>
</html>